<!--
 * @Description: 底部按钮组件
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-10-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-10-28
-->
<script lang="ts" setup>
  const props = defineProps<{
    buttonText: string
    isPre:  boolean
  }>()

  const emits = defineEmits<{ (event: 'onClick'): void }>()

  /**
   * 点击按钮
   */
  const clickButton = () => emits('onClick')
</script>

<template>
  <view class="BottomButton">
    <view class="BottomButton-btn-pre" v-if="props.isPre" @click="clickButton()">{{ props.buttonText }}</view>
    <view class="BottomButton-btn" v-else @click="clickButton()">{{ props.buttonText }}</view>

  </view>
</template>

<style lang="less" scoped>
  .BottomButton {
    z-index: 98;
    height: 160rpx;
    margin: 64rpx 0;
    padding: 0rpx 32rpx 72rpx;
    text-align: center;

    > .BottomButton-btn {
      height: 100%;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #00474f;
      background: linear-gradient(180deg, #87e8de 0%, #13c2c2 100%);
      box-shadow:
        0px 4px 8px 0px rgba(19, 194, 194, 0.5),
        inset 0px -1px 3px 0px rgba(255, 255, 255, 0.5);
      border-radius: 44rpx;
    }

    > .BottomButton-btn-pre {
      height: 100%;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #08979C;
      border-radius: 22px;
      border: 1px solid #08979c;
      border-radius: 44rpx;
    }
  }
</style>
